<template>
  <view class="list" :class="[isWaterfall ? 'isWaterfall' : '']">
    <view
      class="item"
      v-for="item of list"
      :key="item.id"
      @click="goDetail(item)"
      @longpress.stop="longpress(item)"
    >
      <view class="box">
        <view class="img">
          <view class="icon" v-if="item.type === '1'">
            <i class="iconfont icon-play-fill"></i>
          </view>

          <image
            :mode="isWaterfall ? 'widthFix' : 'aspectFill'"
            :src="item.cover_pic"
          ></image>

          <view
            class="top"
            v-if="
              isUser && getTopTit(item).title === $t('videoGoods.userInfo.top')
            "
          >
            {{ getTopTit(item).title }}
          </view>
        </view>
        <view class="txt">
          <view class="title" v-if="item.title">{{ item.title }}</view>

          <view class="txtFd">
            <view class="userInfo">
              <image mode="aspectFill" :src="item.user_avatar"></image>
              <view class="name">{{ item.user_name }}</view>
            </view>

            <view class="cs" @click.stop="like(item)">
              <i class="iconfont icon1 icon-good-fill" v-if="item.is_like"></i>
              <i class="iconfont icon2 icon-good" v-else></i>

              <view class="num">{{ item.like_count }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },

    isUser: {
      type: Boolean,
      default: false,
    },

    isWaterfall: {
      type: Boolean,
      value: false,
    },
  },

  data() {
    return {
      top: {
        1: {
          title: this.$t("videoGoods.userInfo.top"),
        },
        0: {
          title: this.$t("videoGoods.userInfo.cancelTop"),
        },
      },
    };
  },

  computed: {
    getTopTit() {
      return (item) => {
        let { top } = this,
          { is_top } = item;
        return top[parseInt(is_top)];
      };
    },
  },

  methods: {
    goDetail({ type, id }) {
      let url = `/videoGoods/imgDetails/index`;

      if (type === "1") {
        url = `/videoGoods/videoDetails/index`;
      }

      this.$utils.toUrl(`${url}?id=${id}`, "navigate");
    },

    like(item) {
      this.$emit("like", item);
    },

    longpress(item) {
      this.$emit("longpress", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5rpx;
}

.item {
  width: 50%;
  padding: 5rpx;
}

.img {
  position: relative;
  height: 480rpx;
  background: #d9d9d9;

  .top {
    position: absolute;
    left: 16rpx;
    top: 16rpx;
    padding: 2rpx 8rpx;
    font-size: 20rpx;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
  }

  image {
    width: 100%;
    height: 100%;
  }

  .icon {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;

    .iconfont {
      color: #fff;
      font-size: 32rpx;
    }
  }
}

.txt {
  padding: 14rpx;
  background: #fff;

  .title {
    font-size: 28rpx;
    color: #262626;
    font-weight: bold;
    line-height: 38rpx;
    height: 76rpx;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
}

.txtFd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14rpx;

  .cs {
    display: flex;
    align-items: center;
  }

  .icon1 {
    color: #f0250e;
  }

  .icon2 {
    color: #8c8c8c;
  }

  .iconfont {
    font-size: 34rpx;
  }

  .num {
    margin-left: 4rpx;
    font-size: 22rpx;
  }
}

.userInfo {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;

  image {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: #f2f2f2;
  }

  .name {
    flex: 1;
    overflow: hidden;
    margin: 0 14rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8c8c8c;
  }
}

.isWaterfall {
  .item {
    padding: 5rpx 0;
    width: 100%;
  }

  .img {
    height: auto;

    image {
      display: block;
      width: 100%;
    }
  }
}

video {
  display: block;
  width: 100%;
}
</style>
